<template>
  <view class="pages">
    <h-line :height="tops" bgColor="#fff"></h-line>
    <view class="headerBox">
      <u-icon name="arrow-left" color="#333333" size="20" @click="toUp"></u-icon>
      <view class="searchBox">
        <view class="searchIcon">
          <u-icon name="search" color="#BDBDBD" size="24"></u-icon>
        </view>
        <input
          type="text"
          placeholder="请输入您要搜索的内容"
          placeholder-style="font-size: 28rpx;color: #999999;"
          @focus="toUp"
          :maxlength="26"
          v-model="searchValue"
        />
        <view class="closeIcon" v-if="searchValue" @click="toClearUp">
          <u-icon name="close-circle-fill" color="#BDBDBD" size="18"></u-icon>
        </view>
      </view>
    </view>
    <view class="section">
      <view v-if="patientList.length" class="patient_list_box">
        <view
          class="patient_list"
          v-for="(item, index) in patientList"
          :key="index"
        >
        <view @click="navigateTo(`/pages-users/order/orderDetail?id=${item?.id}`)">
          <view class="  u-p-b-20 u-flex u-border-bottom">
            <view class="u-flex-1 text">订单号：{{ item?.sn }}</view>
            <view></view>
          </view>

          <view class="rightTop " v-if= "item?.status==2"></view>
          <view class="status status1" style="color: #00C1B9;" v-if="item?.status==1">待问诊</view>
          <view class="status status1" v-if="item?.status==2">问诊中</view>
          <view class="status status2" style="color: #AAAAAA;"  v-if="item?.status > 2" >已完成</view>
          <view  class=" u-p-t-20 u-flex">
            <image src="https://ossresource.miyingbl.com/def/c0c17202406251553104065.png" mode="" class="icon"></image>
            <view class="text">患者：</view>
            <view class="text1">{{ item?.u_name }}</view>
          </view>
          <view class="u-p-t-20 u-flex" v-if="item?.type == 1 || item?.type == 2">
            <image src="https://ossresource.miyingbl.com/def/877d020240625162532472.png" mode="" class="icon"></image>
            <view class="text">主诉：</view>
            <view class="text1 line1 u-flex-1">{{ item?.describe }}</view>
          </view>
          <view class="u-p-t-20 u-flex">
            <image src="https://ossresource.miyingbl.com/def/6a338202406251626167896.png" mode="" class="icon"></image>
            <view class="text">服务类型：</view>
            <view class="text1">{{ item?.transaction_type }}</view>
          </view>
          <view class="u-p-t-20 u-p-b-20 u-flex u-border-bottom">
            <image src="https://ossresource.miyingbl.com/def/37194202406251624075828.png" mode="" class="icon"></image>
            <view class="text">问诊时间：</view>
            <view class="text1">{{ item?.last_time }}</view>
          </view>
        </view>

        <view class="u-p-t-20 u-flex u-row-right">

          <view class="u-flex-1 u-flex u-flex-items-end">
             <view class="text">订单金额：</view>
            ￥<text class="price">{{ item?.total_price }}</text>
          </view>
          <view class="u-flex u-row-right">
            <view class="btns" @click="toInterrogation(item)" v-if="item?.status > 2">查看问诊历史</view>
            <view class="btns" @click.stop="toInterrogation(item)" v-else>发起问诊</view>
          </view>

        </view>
        </view>
      </view>
      <view v-else class="sec_none">
        <!-- <image src="@/static/patient/no_patient.png"></image> -->
        <view class="sec_none_text">暂时没有找到相关用户</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/utils'
import { useMemberStore, useSystemStore } from '@/stores'
import { ref, onMounted, watch } from 'vue'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { navigateTo, navigateBack } from '@/utils/index'
import { getOrderListApi } from '@/api/patients/index'
const login = ref(null) // 登录组件实例
const store = useMemberStore()
var token = store?.token
const tops = ref(0)
const searchValue = ref('')
const getpatientPreams = ref({
  page: 1,
  limit: 10,
  type:0,
  order_type: props?.type,
  keyword: '',
})
//最总页
const last_page = ref(0)
const articleList = ref([])
const indicatorStyle = ref('height: 50px;color:#333;')
const timeShow = ref(false)
const patientList = ref([])
var props = defineProps({
  searchValue: String,
  dateTime: String,
  meal: String,
  type:[Number,String]
})
searchValue.value = props?.searchValue
//登录
function updateInfo() {
  const store = useMemberStore()
  token = store?.token
}

onBackPress((o) => {
  console.log('from:' + o)
  return false
})
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight * 2
    },
  })
})
onShow(async () => {
  patientList.value = []
  console.log(patientList.value)
  getpatientPreams.value.page = 1
  last_page.value = 1
  if (props?.searchValue) {
    getpatientPreams.value.keyword = props?.searchValue
    getpatientList()
  }
})
async function getpatientList() {
  const res = await getOrderListApi(getpatientPreams.value)
  if (res?.code == 200) {
    let list = res.data.data.map((item) => {
      item.key = 'chat_time'
      if (item.sex == 0) {
        item.sex = '女'
      } else {
        item.sex = '男'
      }
      return item
    })
    last_page.value = res.data.last_page
    patientList.value =
      getpatientPreams.value.page < last_page.value ? list : patientList.value.concat(list)
    patientList.value = [...new Set(patientList.value)]
  }
}
function toUp() {
  uni.redirectTo({
    url: `/pages-users/order/search/index?keywords=${searchValue?.value}&type=${props?.type}`
  })
}

function toClearUp() {
  uni.redirectTo({
    url: '/pages-users/order/search/index?type=' + props?.type,
  })
}
//去详情
function toPatienDetails(id) {
  navigateTo(`/patients/info/index?userId=${id}`)
}
//问诊
function toInterrogation(row) {
console.log(row)
  navigateTo(
    `/pregnancys/index/doctor-chat?uid=${row?.uid}&name=${row?.u_name}&avatar=${row?.avatar}&chat_type=${row.type}`,
  )
}
</script>

<style lang="scss" scoped>
.pages {
  width: 100%;
  min-height: 100vh;
  background: #f5f6f8;
  font-family: PingFangSC, PingFang SC;
}
.topCen {
  width: 350rpx;
  margin: 0 auto;
  height: 100%;
  z-index: 1;
  padding: 10rpx 0;
  box-sizing: border-box;
  .head_data {
    width: 300rpx;
    margin: 0 auto;
    height: 64rpx;
    font-size: 36rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #333333;
    line-height: 64rpx;
    text-align: center;
    .head_data_img {
      width: 18rpx;
      height: 12rpx;
      margin-left: 10rpx;
      position: relative;
      top: -6rpx;
    }
  }
}
.headerBox {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 9999;
  .searchBox {
    margin-left: 20rpx;
    width: 639rpx;
    height: 64rpx;
    background: #f6f6f6;
    border-radius: 32rpx;
    position: relative;
    input {
      width: 639rpx;
      height: 64rpx;
      background: #f6f6f6;
      border-radius: 32rpx;
      padding: 0rpx 70rpx 0rpx 76rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .searchIcon {
      position: absolute;
      left: 20rpx;
      top: 9rpx;
    }
    .closeIcon {
      position: absolute;
      right: 20rpx;
      top: 14rpx;
      z-index: 10;
    }
  }
}

.section {
  margin-top: 20rpx;
  .patient_list_box {
    width: 702rpx;
    margin: 0 auto;
    .patient_list {

      padding: 20rpx;
      border-radius: 20rpx;
      position: relative;
      margin-bottom: 20rpx;
      background: #ffffff;
      .icon {
      width: 26rpx;
      height: 26rpx;
      display: block;
      margin-right: 15rpx;
    }

    .text {
      font-size: 26rpx;
      color: #5C5C5C;
    }

    .text1 {
      font-size: 26rpx;
      color: #202020;
    }
    .price{
      font-size: 36rpx;
      color: #202020;
    }
    .btns {
      border-radius: 30rpx;
      border: 1rpx solid #AAAAAA;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #5C5C5C;
      padding: 0 20rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-left: 10rpx;
    }

    .rightTop {
      position: absolute;
      width: 66rpx;
      height: 66rpx;
      top: 0;
      right: 0;
      border-radius: 0 20rpx 0 0;
      background: linear-gradient(225deg, #8BCA64 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 1) 100%);
      &.status1{
        background: linear-gradient(225deg, #8BCA64 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 1) 100%);
      }
      &.status2{
        background: linear-gradient(225deg, #CB5000 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 1) 100%);
      }
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;
      padding: 20rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
      &.status1 {
        color: #8BCA64;
        &::after{
          position: absolute;
          content: "";
          left: -7rpx;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 14rpx;
          height: 14rpx;
          background: #8BCA64;
          border-radius: 50%;
        }
      }

      &.status2 {
        color: #CB5000;
      }
    }
    }
  }
}
.sec_list:last-of-type {
  border-bottom: none;
}
.sec_none {
  text-align: center;
  image {
    width: 226rpx;
    height: 204rpx;
    margin-top: 400rpx;
  }
  .sec_none_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ababab;
    line-height: 36rpx;
    margin-top: 200rpx;
  }
}
.time_box {
  width: 100%;
  .time_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
    line-height: 33rpx;
    text-align: center;
    padding-top: 30rpx;
    padding-bottom: 20rpx;
  }
  .picker-view {
    width: 750rpx;
    height: 500rpx;
  }
  .item {
    width: 375rpx;
    line-height: 85rpx;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
  }
  .time_box_btn {
    width: 702rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
    border-radius: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    margin: 50rpx auto;
  }
}
</style>
